<template>
  <div>
    <h1>图片和图标引入</h1>
    <div>
      <!-- 第一种 -->
      <h2>第一种</h2>
      <!-- ../../相对路径，第一种适合写死的图片 -->
      <img src="../../assets/img/logo.png" alt="" />
      <img src="@/assets/img/logo.png" alt="" />
      <hr />
      <h2>第二种</h2>
      <!-- 常用于在业务中要改变图片变量控制import logo from '@/assets/img/logo.png'-->
      <img :src="logo" />
      <button @click="handClick2">点击事件改变第二种图片地址</button>
      <hr />
      <h2>第三种</h2>
      <!-- 第三种方法封装 -->
      <img :src="getImg(pic)" />
      <img :src="$utils.getImg(pic)" />
      <!-- $utils全局挂载的方法 -->
      <button @click="handClick3">点击事件改变第三种方法图片地址</button>
      <!-- css背景图片 -->
      <h2>css背景图片</h2>
      <div class="bgimg"></div>
      <hr />
      <h2>字体图标</h2>
      <p><i class="iconfont icon-youjiantou"></i></p>
      <p><i class="iconfont icon-xiajiantou"></i></p>
      <h2>svg图标</h2>
      <p>1.如图片方式引入，但是无法改变颜色</p>
      <img :src="tblogo" alt="" />
      <p>1.svg-icon全局组件用的vite-plugin-svg-icons插件封装这种最好</p>
      <SvgIcon name="icon-tb" color="red" width="50px" height="50px"></SvgIcon>
      <SvgIcon name="copyright" color="red" width="50px" height="50px"></SvgIcon>
    </div>
  </div>
</template>

<!-- <script>
import logo from '@/assets/img/logo.png'
import pic from '@/assets/img/pic1.png'
import tblogo from '@/assets/img/tb.svg'
export default {
  name: 'jtzy-page',
  data() {
    return {
      logo,
      pic: 'logo.png',
      tblogo,
    }
  },
  methods: {
    getImg(name) {
      return new URL(`../../assets/img/${name}`, import.meta.url).href
    },
    handClick2() {
      // 第二种
      this.logo = this.logo === logo ? pic : logo
    },
    handClick3() {
      // 第三种
      this.pic = this.pic === 'logo.png' ? 'pic1.png' : 'logo.png'
    }
  }
}
</script>
 -->
<script setup>
defineOptions({
  name: 'jtzy-page'
})
import webLogo from '@/assets/img/logo.png'
import webPic from '@/assets/img/pic1.png'
import webTblogo from '@/assets/img/tb.svg'
import { ref } from 'vue'
const logo = ref(webLogo)
const pic = ref('logo.png')
const tblogo = ref(webTblogo)
const getImg = (name) => {
  return new URL(`../../assets/img/${name}`, import.meta.url).href
}
const handClick2 = () => {
  // 第二种
  logo.value = logo.value === webLogo ? webPic : webLogo
}
const handClick3 = () => {
  // 第三种
  pic.value = pic.value === 'logo.png' ? 'pic1.png' : 'logo.png'
}
</script>
<style lang="scss" scoped>
img {
  width: 50px;
  height: auto;
}
.bgimg {
  width: 100px;
  height: 100px;
  background: url('../../assets/img/logo.png') left center/cover no-repeat;
}
.iconfont {
  color: red;
  font-size: 26px;
}
.icon-tb {
  color: rgb(194, 48, 22);
  font-size: 46px;
}
</style>
